<template>
    <div class="content_wrap">
        <a-watermark content="海克曼科技有限公司">
            <div class="head_wrap">
                <div style="display: flex;align-items: center;margin-left:250px;">
                    <icon-lark-color style="font-size: 32;" />
                    <span style="font-size: 18px;margin-left:10px;font-weight: 500;">集群控制台</span>
                </div>
            </div>
            <div class="main_wrap">
                <div class="login_box">
                    <div style="background-color: #e2eefc;">
                        <img src="../assets/img/login_bg.png" style="width: 550px;">
                    </div>
                    <div style="padding:20px;width: 310px;">
                        <div
                            style="height:50px;font-size: 24px;margin-top: 10px;font-weight: 500;text-align: center;padding-bottom:10px;">
                            用户登录
                        </div>
                        <a-form :model="formData" :rules="rules" @submit="onSubmit" size="large">
                            <a-form-item field="username" validate-trigger="blur" hide-label>
                                <a-input v-model="formData.username" placeholder="请输入用户名" allow-clear>
                                    <template #prefix>
                                        <icon-user />
                                    </template>
                                </a-input>
                            </a-form-item>
                            <a-form-item field="password" validate-trigger="blur" hide-label>
                                <a-input-password v-model="formData.password" placeholder="请输入密码"
                                    :defaultVisibility="true" allow-clear>
                                    <template #prefix>
                                        <icon-lock />
                                    </template>
                                </a-input-password>
                            </a-form-item>
                            <a-row :gutter="16">
                                <a-col :span="14">
                                    <a-form-item field="captcha" validate-trigger="blur" hide-label>
                                        <a-input v-model="formData.captcha" placeholder="请输入验证码" allow-clear>
                                            <template #prefix>
                                                <icon-email />
                                            </template>
                                        </a-input>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="2">
                                    <img :src="captchaPath" @click="getCaptcha()" style="margin-top:0px;">
                                </a-col>
                            </a-row>
                            <a-form-item hide-label style="margin-top:20px;">
                                <a-button html-type="submit" type='primary' long style="width:100%;">登录</a-button>
                            </a-form-item>
                        </a-form>
                        <div style="font-size:12px;padding: 12px;color:#909399;text-align: center;">
                            建议使用Chrome浏览器访问，获得更好的体验！
                        </div>
                    </div>
                </div>
            </div>
        </a-watermark>
    </div>
</template>
<script>
import { getUUID } from '../utils';
import http from '../utils/request'
import Cookies from 'js-cookie';
export default {
    data() {
        return {
            captchaPath: '',
            formData: {
                username: '',
                password: '',
                captcha: ''
            },
            rules: {
                username: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' },
                ],
                captcha: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' }
                ]
            },
        }
    },
    created() {
        this.getCaptcha()
    },
    methods: {
        onSubmit({ values, errors }) {
            if (errors) {
                this.$message.error('请检查表单填写');
                return;
            }
            var that = this;
            http.post('/api/login', that.formData).then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    that.getCaptcha();
                    that.logining = false;
                    that.$message.error(res.msg);
                    return
                }
                Cookies.set('username', that.formData.username)
                Cookies.set('token', res.data)
                this.$router.push('/main').catch(err => err)
            }).catch(() => { })
        },
        getCaptcha() {
            this.formData.uuid = getUUID()
            this.captchaPath = `/api/captcha?uuid=${this.formData.uuid}`
        }
    }
}
</script>
<style scoped>
.head_wrap {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    -webkit-app-region: drag;
    background-color: #fff;
    color: #323639;
    border-bottom: 1px solid #e5e6ed;
    padding: 0 20px 0 20px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
}

.main_wrap {
    margin-top: 50px;
    background-color: #f6f7fa;
}

.login_box {
    width: 900px;
    height: 430px;
    display: flex;
    margin: 170px auto;
    background-color: #fff;
}

.content_wrap {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #f6f7fa;
}
</style>